<script setup lang="ts">
import { ShortcutKey } from "@/types.ts";
import { $ref } from "vue/macros";
import FeedbackModal from "@/components/toolbar/FeedbackModal.vue";
import BaseIcon from "@/components/BaseIcon.vue";
import Tooltip from "@/components/Tooltip.vue";
import IconWrapper from "@/components/IconWrapper.vue";
import { Icon } from "@iconify/vue";
import useTheme from "@/hooks/theme.ts";
import { useSettingStore } from "@/stores/setting.ts";
import { onMounted, ref } from "vue";

let showFeedbackModal = $ref(false);
const { toggleTheme } = useTheme();
const settingStore = useSettingStore();
</script>

<template>
  <div class="right-bar">
    <div style="text-align: right; width: 100%">
      <Tooltip
        :title="`切换主题(快捷键：${
          settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]
        })`"
      >
        <IconWrapper>
          <Icon
            icon="ep:moon"
            v-if="settingStore.theme === 'dark'"
            @click="toggleTheme"
          />
          <Icon icon="tabler:sun" v-else @click="toggleTheme" />
        </IconWrapper>
      </Tooltip>
    </div>
    <div class="canvas-wrapper-box">
      <div class="canvas-wrapper">
        <canvas id="canvasRef"></canvas>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.right-bar {
  width: 20%;
  position: fixed;
  right: var(--space);
  top: var(--space);
  z-index: 1;
  display: flex;
  gap: 10rem;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: flex-start;

  .canvas-wrapper-box {
    height: calc(100vh - 183px);
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    margin-right: 100px;
  }
  .canvas-wrapper {
    height: 400px;
    width: 400px;
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
